<template>
  <div class="user">
    <div class="user-left-tree">
      <div class="user-tree-btn">
          <el-button class="btn-1" type="primary" @click="addDepartment" v-jurisdiction="'company:user:dept:add'">新增</el-button>
          <el-button class="btn-1" type="primary" @click="editDepartment" v-jurisdiction="'company:user:dept:update'">修改</el-button>
          <el-button class="btn-2" type="danger" @click="deleteDepartment" v-jurisdiction="'company:user:dept:del'">删除</el-button>
      </div>
      <div class="tree">
        <el-tree default-expand-all :data="treedata" :props="defaultProps" @node-click="handleNodeClick" />
      </div>
    </div>
    <div class="user-right-content">
      <zsearch v-loading="loading">
        <template #title>
          <span>用户管理</span>
        </template>
        <template #select>
          <el-input class="input-1" v-model="name" placeholder="请输入名称"></el-input>
        </template>
        <template #btns>
          <el-button class="btn-1" @click="hanledSearch" v-jurisdiction="'company:user:user:page'">查询</el-button>
          
        </template>
        <template #opration>
          <el-button class="btn-2" @click="addRole" v-jurisdiction="'company:user:user:save'">添加用户</el-button>
        </template>
        <template #table>
          <ztable 
            :tableData='data' 
            :strucs='groupData'
            :header-cell-style="{background:'#11b9d0', color:'#fff'}"
            :height="'100%'"
            :width="'400'"
            :isshowOperation="true"
          >
            <template #default="slotScope">
              <el-button type="text" class="operation" @click="handleEditItem(slotScope.rowData, slotScope.index)" v-jurisdiction="'company:user:user:save'">修改</el-button>
              <el-button type="text" class="operation" @click="handleBindBranch(slotScope.rowData, slotScope.index)" v-jurisdiction="'company:user:dept:bindDept'">绑定部门</el-button>
              <el-button type="text" class="operation" @click="handleBindRoles(slotScope.rowData, slotScope.index)" v-jurisdiction="'company:user:user:bindRole'">绑定角色</el-button>
              <el-button type="text" class="operation" @click="handleUnBind(slotScope.rowData, slotScope.index)" v-jurisdiction="'company:user:user:unbind'">解绑</el-button>
              <el-button type="text" class="operation" @click="handleDelItem(slotScope.rowData)"  v-jurisdiction="'company:user:user:del'">删除</el-button>
            </template>
          </ztable>
        </template>
        <template #page>
          <zpage
              :currentPage="current" 
              :total="total"
              :pageSize="size"
              @handleSizeChange="handleSizeChange" 
              @handleCurrentChange="handleCurrentChange"
          ></zpage>
        </template>
      </zsearch>
    </div>
  </div>
  

    <!-- 用户添加/修改 -->
    <zdialog :title="roleTitle" @handleClose="closeDialog" v-model="dialogVisible" :btnData="dialogBtnData">
      <template #body>
        <div class="flex-wrap">
          <component :is="showWidget(item.type)" v-for="item in groupAddData" :key="item.name" :struc="item" :passWidth="33.333"  />
        </div>
			</template>
    </zdialog>

    <!-- 绑定部门 -->
    <zdialog title="绑定部门" @handleClose="closeBranchRoleDialog('depart')" v-model="dialogBranchRoleVisible" :btnData="dialogBranchRoleBtnData">
      <template #body>
        <el-tree 
          default-expand-all 
          highlight-current 
          :data="treedata" 
          :props="defaultProps"
          @node-click="handleAddNodeClick" />
			</template>
    </zdialog>
    <!-- 绑定角色 -->
    <zdialog title="绑定角色" @handleClose="closeBranchRoleDialog('role')" v-model="dialogRoleVisible" :btnData="RoleBtnData">
      <template #body>
        <div class="leftToRight-layout" style="width: 100%;">
              <div class="label">
                <span>绑定角色</span>
              </div>
              <div class="operations" >
                <el-select v-model="roleList" @change="selectType" multiple  placeholder="请选择">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
        
			</template>
    </zdialog>

    <!-- 添加部门 -->
    <zdialog :title="operationTitle" @handleClose="Dialog" v-model="visible" :btnData="BtnManage">
      <template #body>
        <div class="flex-wrap">
          <div class="leftToRight-layout" >
              <div class="label">
                <span>上级部门</span>
              </div>
              <div class="operations" >
                <el-popover placement="bottom" :width="400" trigger="click">
                  <template #reference>
                    <el-input :disabled="isAdd" class="input-1" v-model="oldDepartment" placeholder="上级部门"></el-input>
                  </template>
                  <el-tree 
                      ref="treeRef"
                      default-expand-all 
                      highlight-current 
                      :data="treedata" 
                      :props="defaultProps" 
                      @node-click="handleNodeClickInside"
                      node-key="id"
                      @check="handleCheckChange"
                      />
                </el-popover>
                
              </div>
            </div>
          <div class="leftToRight-layout">
              <div class="label">
                <span>部门名称</span>
              </div>
              <div class="operations" >
                <el-input class="input-1" v-model="department" placeholder="部门名称"></el-input>
              </div>
            </div>
        </div>
      </template>
    </zdialog>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onUnmounted } from 'vue'
import ztable from '@components/Table/index.vue'
import zpage from '@components/pagination/pagination.vue'
import zsearch from '@components/search/search.vue'
import zdialog from '@components/dialog/dialog.vue'

import useConfgin from './../../../hook/getconfig'
import useShowWidget from "./../../../components/widget/usechoose";
import useRequet, { RespData } from "./../../../hook/network"
import { ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from "./../../../utils/debounce"

import {Option} from "./../../../types"
import useDataCheck from '../../../hook/datastruc'

const configID = 550
export default defineComponent({
  name: 'User',
  components: {
    ztable,
    zpage,
    zsearch,
    zdialog
  },
  setup() {
    const showWidget = useShowWidget;
    const dataCheck = useDataCheck();
    const rowList = useConfgin(configID)
    console.log('用户管理', rowList)
    const request = useRequet({ path: "" });
    let search = reactive({
      name: '',
      roleName: '',
      typeId: '',
      options: [],
      haveZeroCount: false,
      onlyHighPrice: false,
      onlyWarningCount: false,
      loading: false,
      id: '',

      current: 1,
      size: 10,
      total: 0,

      listUser: [] as any
    })
    const data = ref([])
    const groupData = rowList.groupDataList.value;

    const groupAddData = ref([
      {
        id: 529,
            name: "loginName",
            viewName: "登录名称",
            type: 102,
            groupId: 501,
            dataSource: "",
            hint:'请输入',
            defaultValue: null,
            length: null,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 0,
            errorHit: "登录名不能为空",
            value: "",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: null,
            idName: null,
            columnWidth:'',
      },
      {
        id: 529,
            name: "password",
            viewName: "密码",
            type: 104,
            groupId: 501,
            dataSource: "",
            hint: '请输入密码',
            defaultValue: null,
            length: 12,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 1,
            errorHit: "密码不能为空",
            value: "",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: null,
            idName: null,
            columnWidth:'',
      },
      {
        id: 529,
            name: "realName",
            viewName: "姓名",
            type: 102,
            groupId: 501,
            dataSource: "",
            hint: null,
            defaultValue: null,
            length: null,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 0,
            errorHit: "",
            value: "",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: null,
            idName: null,
            columnWidth:'',
      },
      {
        id: 529,
            name: "nickName",
            viewName: "昵称",
            type: 102,
            groupId: 501,
            dataSource: "",
            hint: null,
            defaultValue: null,
            length: null,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 0,
            errorHit: "",
            value: "",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: null,
            idName: null,
            columnWidth:'',
      },
      {
        id: 529,
            name: "phone",
            viewName: "电话",
            type: 102,
            groupId: 501,
            dataSource: "",
            hint: null,
            defaultValue: null,
            length: null,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 0,
            errorHit: "",
            value: "",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: null,
            idName: null,
            columnWidth:'',
      },
      {
        id: 529,
            name: "userWorkType",
            viewName: "工作类型",
            type: 202,
            groupId: 501,
            dataSource: "company/user/user/getAllUserType",
            hint: null,
            defaultValue: null,
            length: null,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 1,
            errorHit: "",
            value: "",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: null,
            idName: null,
            columnWidth:'',
      },
      {
        id: 529,
            name: "superUserId",
            viewName: "上级用户",
            type: 202,
            groupId: 501,
            dataSource: "company/user/user/getUserList",
            hint: null,
            defaultValue: null,
            length: null,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 0,
            errorHit: "",
            value: "",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: null,
            idName: null,
            columnWidth:'',
      },
    ])
    search.listUser = JSON.parse(JSON.stringify(groupAddData.value))
    //搜索
    const hanledSearch = () => {
      debounceRefresh()
    }

    const handleType = () => {
      console.debug('下拉')
    }

    // 修改
    const handleEditItem = (rowData:any, index:number) => {
      let result = rowData
          let id = rowData.id
          search.typeId = rowData.id
          roleTitle.value = '修改用户'
          search.roleName = rowData.roleName
          dialogVisible.value = true
          let list = [] as any
          
          search.listUser.forEach((item:any) => {
            if(item.name === 'loginName') {
              // item.canUpdate = 0
            }
            if(item.name === 'password') return
            list.push(item)
            for(let d in result) {
              if(item.name === d) {
                item.value = result[d]
              }
            }
          })

          groupAddData.value = list
    }

    // 绑定部门 
    const handleBindBranch = (rowData:any, index:number) => {
        PersonId.value = rowData.id
        dialogBranchRoleVisible.value = true
    }

    // 绑定角色
    const handleBindRoles = (rowData:any, index:number) => {
      console.log(rowData)
      PersonId.value = rowData.id
      addDepartID.value = rowData.deptId
      roleList.value = rowData.roleIds
      getroleList()
      dialogRoleVisible.value = true
    }

    // 解绑
    const handleUnBind = (rowData:any, index:number) => {
      let id = rowData.id
      let deptId = rowData.deptId
      ElMessageBox.confirm('此操作将解绑部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        request.sendRequest({
          address: `company/dept/user/unBindUserToDept`,
          params: {
            userId: id,
            deptId: deptId
          },
          success: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error('解绑部门' + resp.msg)
            ElMessage.success('解绑部门成功')
            req()
          },
          fail: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error('解绑部门' + resp.msg)
          },
          method: "POST",
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消解绑',
        });
      })
    }

    // 删除用户
    const handleDelItem = (rowData:any) => {
      let id = rowData.id
      ElMessageBox.confirm('此操作将永久该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        request.sendRequest({
          address: `company/user/user/del/${id}`,
          params: {},
          success: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg || '删除失败')
            ElMessage.success('删除成功')
            req()
          },
          fail: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg || '删除失败')
          },
          method: "POST",
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        });
      })
    }
    
    // 分页
    const handleCurrentChange = (val: number) => {
			search.current = val
      req()
      console.debug('handleCurrentChange', val)
		}
    const handleSizeChange = (val: number) => {
      search.size = val
      req()
      console.debug('handleCurrentChange', val)
		}
    
     // 获取用户列表
    const req = () => {
      search.loading = true
      request.sendRequest({
        address: 'company/dept/user/page',
        params: {
          current: search.current,
          size: search.size,
          deptId: search.id,
          realName: search.name
        },
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('获取用户列表' + resp.msg)
					data.value = resp.data.records
          search.total = resp.data.total
          search.current = resp.data.current

          search.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('获取用户列表' + resp.msg)
          search.loading = false
        },
        method: "POST",
      })
    }
    req()

    const debounceRefresh = debounce(req, 1000)

    // 得到树
    type TypeTree = {
      id: number,
      name: string,
      children: TypeTree[]
    }
    const isAdd = ref(false)
    const treeRef = ref<any>(null)
    const treedata = ref([] as TypeTree[])
    const defaultProps = {
        children: 'children',
        label: 'name',
        disabled: 'disabled',
    }
    // 外面树
    const handleNodeClick = (data: any) => {
      department.value = data.name
      oldDepartment.value = data.superDeptName
      departmentID.value = data.id
      search.id = data.id

      req()
      
      
    }
    // 弹框树点击
    const handleNodeClickInside = (data: any) => {
      oldDepartment.value = data.name
      departmentID.value = data.id

    }
    // 添加部门树
    const handleAddNodeClick = (data: any) => {
      addDepartID.value = data.id
      addDepartName.value = data.name
    }
    // 点击check
    const handleCheckChange = (data: any) => {
      console.debug(data,treeRef.value)
    
      
    }
    // 得到树数据
    const getTreeData = () => {
      request.sendRequest({
        address: 'company/dept/getDeptTree',
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('获取树' + resp.msg)
					treedata.value = resp.data

        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('获取树' + resp.msg)
          
        },
        method: "GET",
      })
    }
    getTreeData()

    // 新增部门开始
    const operationTitle = ref('添加部门')
    const oldDepartment = ref('')
    const department = ref('')
    const departmentID = ref('')
    const addDepartID = ref('')
    const addDepartName = ref('')
    const addDepartment = () => {
      isAdd.value = false
      department.value = ''
      oldDepartment.value = ''
      departmentID.value = ''
      operationTitle.value = '添加部门'
      visible.value = true
    }
    const editDepartment = () => {
      isAdd.value = true
      if(departmentID.value) {
        operationTitle.value = '修改部门'
        visible.value = true
      } else {
        ElMessage.warning('请选择部门')
      }
      
    }
    // 删除部门
    const deleteDepartment = () => {
      if(departmentID.value) {
      
        ElMessageBox.confirm(
          '确定要删除选中的部门吗?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            request.sendRequest({
              address: `company/dept/del/${departmentID.value}`,
              params: {},
              success: (resp: RespData) => {
                if(resp.code !== 0) return ElMessage.error(resp.msg)
                ElMessage({
                  type: 'success',
                  message: '删除成功',
                })
                getTreeData()
              },
              fail: (resp: RespData) => {
                if(resp.code !== 0) return ElMessage.error(resp.msg)
              },
              method: "POST",
            })
            
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消删除',
            })
          })
      } else {
        ElMessage.warning('请选择部门')
      }
    }
    // 选择部门
    const selectChange = (e: string) => {
      console.debug(e)
    }

    const closeDialog = () => {
      groupAddData.value.forEach(i => i.value = '')
      // console.log()
      oldDepartment.value = ''
      departmentID.value = ''
      dialogVisible.value = false
      
    }
    // 关闭
    const Dialog = () => {
      groupAddData.value.forEach(i => i.value = '')
      oldDepartment.value = ''
      departmentID.value = ''
      visible.value = false
    }
    const BtnManage = [
      {
        name: '关闭',
				func: (data:object) => {
					console.debug('关闭',JSON.parse(JSON.stringify(data)))
          Dialog()
				}
      },
      {
        name: '保存',
        func: (data:object) => {
					console.debug('保存',JSON.parse(JSON.stringify(data)))
          if(department.value && departmentID.value) {

            if(operationTitle.value === '添加部门') {
              request.sendRequest({
                address: 'company/dept/add',
                params: {
                  name: department.value,
                  superDeptId: departmentID.value,
                },
                success: (resp: RespData) => {
                  if(resp.code !== 0) return ElMessage.error('添加部门' + resp.msg)
                  ElMessage.success('添加部门成功')
                  Dialog()
                  getTreeData()
                },
                fail: (resp: RespData) => {
                  if(resp.code !== 0) return ElMessage.error('添加部门' + resp.msg)
                },
                method: "POST",
              })
            } else {
              request.sendRequest({
                address: 'company/dept/update',
                params: {
                  name: department.value,
                  id: departmentID.value,
                },
                success: (resp: RespData) => {
                  if(resp.code !== 0) return ElMessage.error('修改部门' + resp.msg)
                  ElMessage.success('修改部门成功')
                  Dialog()
                  getTreeData()
                },
                fail: (resp: RespData) => {
                  if(resp.code !== 0) return ElMessage.error('修改部门' + resp.msg)
                },
                method: "POST",
              })
            }
            
          } else {
            ElMessage.warning('请选择上级部门')
            ElMessage.warning('请输入部门名称')
            return
          }
          
				}
      }
    ]
    // 添加部门结束

    


    const dialogVisible = ref(false)
    const roleTitle = ref('添加用户')

    const dialogBtnData = [
      {
        name: '取消',
				func: (data:object) => {
					console.debug('取消',JSON.parse(JSON.stringify(data)))
          dialogVisible.value = false
          
				}
      },
      {
        name: '保存',
        func: (data:object) => {
					console.debug('保存',JSON.parse(JSON.stringify(data)))
          let msg = '添加用户'
          let params = {} as any
          
          if(search.typeId) {
            msg = '修改用户'
          }
          groupAddData.value.forEach(item => {
            params[item.name] = item.value
          })
          params.id = search.typeId
          

          if(search.typeId) {
            // 修改
            request.sendRequest({
              address: 'company/dept/user/updateUser',
              params,
              success: (resp: RespData) => {
                if(resp.code !== 0) return ElMessage.error(msg + resp.msg)
                ElMessage.success(msg + resp.msg)
                closeDialog()
                req()
              },
              fail: (resp: RespData) => {
                if(resp.code !== 0) return ElMessage.error(msg + resp.msg)
                search.loading = false
              },
              method: "POST",
            })

          } else {
            // 添加
            request.sendRequest({
              address: 'company/dept/user/addUser',
              params,
              success: (resp: RespData) => {
                if(resp.code !== 0) return ElMessage.error(msg + resp.msg)
                ElMessage.success(msg + resp.msg)
                closeDialog()
                req()
              },
              fail: (resp: RespData) => {
                if(resp.code !== 0) return ElMessage.error(msg + resp.msg)
                search.loading = false
              },
              method: "POST",
            })
          }
          
				}
      }
    ]

    // 添加用户
    const addRole = () => {
      roleTitle.value = '添加用户'
      search.typeId = ''
      search.listUser.forEach((item: any) => {
        item.canUpdate = 1
        item.value = ''
      })
      groupAddData.value = search.listUser
      
      
      dialogVisible.value = true
    }

    // 分院/角色
    const Roleloading = ref(false)
    const roleList = ref([] as number[])
    const typeOptions = ref([] as Option[])
    const selectType = (e: string) => {
      console.debug(e)
    }
    const getroleList = () => {
      request.sendRequest({
        address: `company/user/role/getRoleList`,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('获取角色' + resp.msg)
          typeOptions.value = resp.data
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('获取角色' + resp.msg)
        },
        method: "GET",
      })
    }
    const PersonId = ref('')
    const dialogBranchRoleVisible = ref(false)
    const dialogRoleVisible = ref(false)
    const closeBranchRoleDialog = (type: string) => {
      if(type === 'role') {
        dialogRoleVisible.value = false
        roleList.value = []
      } else {
        dialogBranchRoleVisible.value = false
      }
      
    }
    const dialogBranchRoleBtnData = [
      {
        name: '关闭',
				func: (data:object) => {
					console.debug('关闭',JSON.parse(JSON.stringify(data)))
          dialogBranchRoleVisible.value = false
				}
      },
      {
        name: '确定',
        func: (data: boolean) => {
          console.log(data)
          ElMessageBox.confirm(`用户将要绑定${addDepartName.value}部门, 是否继续?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
            request.sendRequest({
                address: 'company/dept/user/bindUserToDept',
                params: {
                  userId: PersonId.value,
                  deptId: addDepartID.value
                },
                success: (resp: RespData) => {
                  if(resp.code !== 0) return ElMessage.error(resp.msg)
                  ElMessage({
                    type: 'success',
                    message: '绑定成功',
                  })
                  closeBranchRoleDialog('')
                  req()

                },
                fail: (resp: RespData) => {
                  if(resp.code !== 0) return ElMessage.error(resp.msg)
                },
                method: "POST",
              })
            }).catch(() => {
              ElMessage({
                type: 'info',
                message: '已取消删除',
              });
          });
        }
      }
    ]

    const RoleBtnData = [
      {
        name: '关闭',
				func: (data:object) => {
					console.debug('关闭',JSON.parse(JSON.stringify(data)))
          dialogRoleVisible.value = false
				}
      },
      {
        name: '确定',
				func: (data:object) => {
					console.debug('确定',JSON.parse(JSON.stringify(data)))
          request.sendRequest({
            address: 'company/user/user/bindUserRole',
            params: {
              userId: PersonId.value,
              subCompanyId: addDepartID.value,
              roleIds: roleList.value
            },
            success: (resp: RespData) => {
              if(resp.code !== 0) return ElMessage.error(resp.msg)
              ElMessage({
                type: 'success',
                message: '绑定成功',
              })
              closeBranchRoleDialog('role')
              req()
              search.loading = false

            },
            fail: (resp: RespData) => {
              if(resp.code !== 0) return ElMessage.error(resp.msg)
            },
            method: "POST",
          })
				}
      },
    ]
    
    const visible = ref(false)
    

    onUnmounted(() => {
			dataCheck.clearDataCheck();
		});
    return { 
      data, 
      groupData,
      groupAddData,
      showWidget,
      ...toRefs(search),
      handleEditItem,
      handleBindBranch,
      handleBindRoles,
      handleUnBind,
      handleDelItem,

      hanledSearch,
      handleCurrentChange,
      handleSizeChange,
      handleType,

      treedata,
      isAdd,
      treeRef,
      operationTitle,
      defaultProps,
      handleNodeClick,
      handleNodeClickInside,
      handleAddNodeClick,
      handleCheckChange,
      addDepartment,
      editDepartment,
      deleteDepartment,
      selectChange,
      oldDepartment,
      department,
      departmentID,
      addDepartID,
      addDepartName,
      roleList,
      selectType,
      typeOptions,

      request,

      dialogVisible,
      closeDialog,
      dialogBtnData,

      addRole,
      roleTitle,

      dialogBranchRoleVisible,
      dialogRoleVisible,
      closeBranchRoleDialog,
      dialogBranchRoleBtnData,
      RoleBtnData,

      PersonId,
      Roleloading,

      visible,
      Dialog,
      BtnManage,

    }
  }
})
</script>

<style lang="scss" scoped>
.user {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .user-left-tree {
    width: 20%;
    height: 100%;
    background: white;
    box-shadow: 0 2px 5px #ccc;
    border-radius: 4px 0 0 4px;

    .user-tree-btn {
      height: 45px;
      line-height: 45px;
      padding-left: 20px;
      padding-top: 10px;
    }
  }

  .user-right-content {
    width: calc(100% - 20%);
    height: 100%;

  }
}

</style>